<!-- Dom模板 -->
<template>
  <div class="money">
    <!-- Dom内容 -->
    <div class="cond">
      <h3>您的余额不足</h3>
      <div class="dix">
        <button @click="chong">去充值</button>
        <button @click="shao">稍后支付</button>
      </div>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  name: "",
  data() {
    return {
      msg: "测试",
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // Vue方法定义
  methods: {
    chong(){
      this.$router.push("/MacoAge");
      this.$emit('guanbi')
    },
    shao(){
      this.$emit('guanbi')
    }
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
* {
  padding: 0;
  margin: 0;
}
.money {
  width: 100vw;
  height: 100vh;
  left: 0px;
  position: absolute;
  top: 0px;
  line-height: 20px;
  background: rgba(128, 128, 128, 0.5);
}
.cond {
  position: absolute;
  z-index: 30;
  top: 50%;
  left: 50%;
  width: 374px;
  height: 208px;
  line-height: 20px;
  background: white;
  transform: translate(-50%, -50%);
  border-radius: 10px;
}
h3 {
  text-align: center;
  font-size: 37px;
  margin-top: 47px;
}
.dix{
    margin-top: 50px;
    display: flex;
    justify-content: space-around;
}
button {
  width: 126px;
  height: 40px;
  border-radius: 4px;
  background-color: rgba(232, 232, 232, 100);
  color: rgba(16, 16, 16, 100);
  font-size: 17px;
  /* text-align: center; */
  font-family: Microsoft Yahei;
  border: none;
}
button:nth-child(1){
    color: red;
}
</style>